//
//  MainViewController+Layout.swift
//  Hermes
//
//  Created by FH on 2021/1/12.
//  Copyright © 2021 Agora. All rights reserved.
//

import Foundation
// TODO: remove
extension MainViewController {   
    func buildSDKVersionAndScriptsInfoView() {
        let bgView = NSView()
        bgView.bind(to: yoga, self.view) { it in
            it.direction = .row
            it.height = constScriptsInfoViewHeight.toFLValue()
            it.marginHorizontal = constHorizontalMarginDim
        }
        
        // REMARK: layout sdk version
        
        let versionPanel = NSView()
        versionPanel.bind(to: yoga, bgView)
        
        let versionRow_1 = NSView()
        versionRow_1.bind(to: yoga, versionPanel) { it in
            it.direction = .row
            it.marginTop = 6
        }
        
        let versionRow_2 = NSView()
        versionRow_2.bind(to: yoga, versionPanel) { it in
            it.direction = .row
            it.marginTop = 5
        }
        
        let versionRow_3 = NSView()
        versionRow_3.bind(to: yoga, versionPanel) { it in
            it.direction = .row
            it.marginTop = 3
        }
        
        let lblSDKVersionTitle = FLLabel()
        lblSDKVersionTitle.bind(to: yoga, versionRow_1) { it in
            it.height = 20
            it.marginLeft = 2
        }
        lblSDKVersionTitle.flText = "Current SDK Version: "
        lblSDKVersionTitle.textColor = .darkGray
        lblSDKVersionTitle.font = NSFont.systemFont(ofSize: 14)
        
        self.lblSDKVersion.bind(to: yoga, versionRow_1) { it in
            it.width = 100
            it.height = 20
        }
        self.lblSDKVersion.textColor = .darkGray
        self.lblSDKVersion.font = NSFont.boldSystemFont(ofSize: 14)
        
        self.selectSDKVersion.bind(to: yoga, versionRow_2) { it in
            it.width = 140
            it.height = 30
        }
        
        self.btnLoadOtherSDKVersion.bind(to: yoga, versionRow_2) { it in
            it.width = 100
            it.height = 26
            it.marginLeft = 4
        }
        self.btnLoadOtherSDKVersion.flTitle = "Load Other SDK"
        self.btnLoadOtherSDKVersion.flTitleColor = .darkGray
        self.btnLoadOtherSDKVersion.flBackgroundColor = .white
        self.btnLoadOtherSDKVersion.flCornerRadius = 4
        self.btnLoadOtherSDKVersion.isEnabled = false
        
        self.btnDiffSDKVersion.bind(to: yoga, versionRow_3) { it in
            it.width = 132
            it.height = 26
            it.marginLeft = 4
        }
        self.btnDiffSDKVersion.flTitle = "Diff With Current SDK"
        self.btnDiffSDKVersion.flTitleColor = .darkGray
        self.btnDiffSDKVersion.flBackgroundColor = .white
        self.btnDiffSDKVersion.flCornerRadius = 4
        self.btnDiffSDKVersion.isEnabled = false
        
        self.btnImportSDK.bind(to: yoga, versionRow_3) { it in
            it.width = 100
            it.height = 26
            it.marginLeft = 8
        }
        self.btnImportSDK.flTitle = "Import SDK"
        self.btnImportSDK.flTitleColor = .darkGray
        self.btnImportSDK.flBackgroundColor = .white
        self.btnImportSDK.flCornerRadius = 4
        self.btnImportSDK.isEnabled = false
        
        // dividing line
        let dividingLine = NSView()
        dividingLine.bind(to: yoga, bgView) { it in
            it.marginHorizontal = 20
            it.width = 0.5
            it.marginVertical = 16
        }
        dividingLine.flBackgroundColor = .lightGray
        
        // REMARK: layout scripts infos
        
        let scriptsLeftView = NSView()
        scriptsLeftView.bind(to: yoga, bgView) { it in
            it.alignItems = .center
        }
        
        self.selectScripts.bind(to: yoga, scriptsLeftView) { it in
            it.width = 180
            it.height = 30
        }
        
        let scriptsLeftRow_2 = NSView()
        scriptsLeftRow_2.bind(to: yoga, scriptsLeftView) { it in
            it.direction = .row
            // TODO: support between alignment
        }
        
        self.btnEditScript.bind(to: yoga, scriptsLeftRow_2) { it in
            it.height = 26
            it.width = 80
        }
        self.btnEditScript.flTitle = "Edit Script"
        self.btnEditScript.flTitleColor = .darkGray
        self.btnEditScript.flBackgroundColor = .white
        self.btnEditScript.flCornerRadius = 4
        
        self.btnAddScript.bind(to: yoga, scriptsLeftRow_2) { it in
            it.height = 26
            it.width = 80
            it.marginLeft = 16
        }
        self.btnAddScript.flTitle = "New Script"
        self.btnAddScript.flTitleColor = .darkGray
        self.btnAddScript.flBackgroundColor = .white
        self.btnAddScript.flCornerRadius = 4
        
        self.btnInvokeSingleInstruction.bind(to: yoga, scriptsLeftView) { it in
            it.height = 26
            it.width = 176
            it.marginTop = 8
        }
        self.btnInvokeSingleInstruction.flTitle = "Invoke Single Instruction"
        self.btnInvokeSingleInstruction.flTitleColor = .darkGray
        self.btnInvokeSingleInstruction.flBackgroundColor = .white
        self.btnInvokeSingleInstruction.flCornerRadius = 4

        // TODO: remove
        let scriptsCenterView = NSView()
        scriptsCenterView.bind(to: yoga, bgView) { it in
            it.flexGrow = 1
            it.marginHorizontal = 16
        }
        
        let scriptsRightView = NSView()
        scriptsRightView.bind(to: yoga, bgView) { it in
            it.paddingRight = constHorizontalMarginDim.toFLValue()
        }
        
        let scriptsRightRow_1 = NSView()
        scriptsRightRow_1.bind(to: yoga, scriptsRightView) { it in
            it.direction = .row
        }
        
        let scriptsRightRow_2 = NSView()
        scriptsRightRow_2.bind(to: yoga, scriptsRightView) { it in
            it.direction = .row
            it.marginTop = 4
            it.alignItems = .center
            it.height = 30
        }
        
        self.selectInvokeMode.bind(to: yoga, scriptsRightRow_1) { it in
            it.width = 130
            it.height = 30
            it.marginTop = 3
        }
        
        self.btnSubmit.bind(to: yoga, scriptsRightRow_1) { it in
            it.height = 26
            it.width = 80
            it.marginTop = 4
            it.marginLeft = 4
        }
        self.btnSubmit.flTitle = "Run"
        self.btnSubmit.flTitleColor = .white
        self.btnSubmit.flBackgroundColor = .orange
        self.btnSubmit.flCornerRadius = 4
        
        let lblRunModeTitle = FLLabel()
        lblRunModeTitle.bind(to: yoga, scriptsRightRow_2) { it in
            it.marginLeft = 4
        }
        lblRunModeTitle.flText = "RunMode: "
        lblRunModeTitle.textColor = .darkGray
        lblRunModeTitle.font = NSFont.systemFont(ofSize: 12)
        
        self.lblRunMode.bind(to: yoga, scriptsRightRow_2) { it in
            it.width = 65
        }
        self.lblRunMode.textColor = .darkGray
        self.lblRunMode.font = NSFont.boldSystemFont(ofSize: 12)
        
        self.btnNextStep.bind(to: yoga, scriptsRightRow_2) { it in
            it.height = 26
            it.width = 80
        }
        self.btnNextStep.flTitle = "Step Next"
        self.btnNextStep.flTitleColor = .darkGray
        self.btnNextStep.flBackgroundColor = .white
        self.btnNextStep.flCornerRadius = 4
        
        let line = NSView()
        line.bind(to: yoga, bgView) { it in
            it.position = .absolute
            it.bottom = 0
            it.height = 0.5
            it.left = 4
            it.right = 4
        }
        line.flBackgroundColor = .darkGray
    }
    
    func buildCommonSettingsView() {
        let bgView = NSView()
        bgView.bind(to: yoga, self.view) { it in
            it.height = constSettingsInfoViewHeight.toFLValue()
            it.marginHorizontal = constHorizontalMarginDim
            it.marginTop = constVerticalMarginDim.toFLValue()
        }
        bgView.flBackgroundColor = .lightGray
        
        // line 1
        let row_1 = NSView()
        row_1.bind(to: yoga, bgView) { it in
            it.direction = .row
            it.height = 30
            it.alignItems = .center
        }
        
        let lblChannelProfileTitle = FLLabel()
        lblChannelProfileTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblChannelProfileTitle.flText = "ChannelProfile: "
        lblChannelProfileTitle.textColor = .black
        lblChannelProfileTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectChannelProfile.bind(to: yoga, row_1) { it in
            it.width = 140
            it.height = 30
        }
        
        let lblClientRoleTitle = FLLabel()
        lblClientRoleTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblClientRoleTitle.flText = "LiveBroadcastRole: "
        lblClientRoleTitle.textColor = .black
        lblClientRoleTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectClientRole.bind(to: yoga, row_1) { it in
            it.width = 140
            it.height = 30
        }
        
        let lblVideoDimensionTitle = FLLabel()
        lblVideoDimensionTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblVideoDimensionTitle.flText = "VideoDimension: "
        lblVideoDimensionTitle.textColor = .black
        lblVideoDimensionTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectVideoDimension.bind(to: yoga, row_1) { it in
            it.width = 140
            it.height = 30
        }
        
        let lblVideoFrameTitle = FLLabel()
        lblVideoFrameTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblVideoFrameTitle.flText = "VideoFrameRate: "
        lblVideoFrameTitle.textColor = .black
        lblVideoFrameTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectVideoFrameRate.bind(to: yoga, row_1) { it in
            it.width = 90
            it.height = 30
        }
        
        let lblAudioProfileTitle = FLLabel()
        lblAudioProfileTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblAudioProfileTitle.flText = "AudioProfile: "
        lblAudioProfileTitle.textColor = .black
        lblAudioProfileTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectAudioProfile.bind(to: yoga, row_1) { it in
            it.width = 175
            it.height = 30
        }
        
        let lblAudioScenarioTitle = FLLabel()
        lblAudioScenarioTitle.bind(to: yoga, row_1) { it in
            it.marginLeft = 2
        }
        lblAudioScenarioTitle.flText = "AudioScenario: "
        lblAudioScenarioTitle.textColor = .black
        lblAudioScenarioTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectAudioScenario.bind(to: yoga, row_1) { it in
            it.width = 155
            it.height = 30
        }
        
        // line 2
        let row_2 = NSView()
        row_2.bind(to: yoga, bgView) { it in
            it.direction = .row
            it.height = 30
            it.alignItems = .center
        }
        
        let lblGridCountTitle = FLLabel()
        lblGridCountTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 2
        }
        lblGridCountTitle.flText = "RemoteVideosCount: "
        lblGridCountTitle.textColor = .black
        lblGridCountTitle.font = NSFont.systemFont(ofSize: 12)
        self.inputGridCount.bind(to: yoga, row_2) { it in
            it.width = 120
            it.height = 24
            it.marginLeft = 2
        }
        self.inputGridCount.font = NSFont.systemFont(ofSize: 14)
        
        let lblChannelIdTitle = FLLabel()
        lblChannelIdTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 6
        }
        lblChannelIdTitle.flText = "ChannelId: "
        lblChannelIdTitle.textColor = .black
        lblChannelIdTitle.font = NSFont.systemFont(ofSize: 12)
        self.inputChannelId.bind(to: yoga, row_2) { it in
            it.width = 140
            it.height = 24
            it.marginLeft = 2
        }
        self.inputChannelId.font = NSFont.systemFont(ofSize: 14)
        
        let lblAppIdTitle = FLLabel()
        lblAppIdTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 6
        }
        lblAppIdTitle.flText = "AppId: "
        lblAppIdTitle.textColor = .black
        lblAppIdTitle.font = NSFont.systemFont(ofSize: 12)
        self.inputAppId.bind(to: yoga, row_2) { it in
            it.width = 140
            it.height = 24
            it.marginLeft = 2
        }
        self.inputAppId.font = NSFont.systemFont(ofSize: 14)

        let lblTokenTitle = FLLabel()
        lblTokenTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 6
        }
        lblTokenTitle.flText = "Token: "
        lblTokenTitle.textColor = .black
        lblTokenTitle.font = NSFont.systemFont(ofSize: 12)
        self.inputToken.bind(to: yoga, row_2) { it in
            it.width = 140
            it.height = 24
            it.marginLeft = 2
        }
        self.inputChannelId.font = NSFont.systemFont(ofSize: 14)
        
        let lblTokenTypeTitle = FLLabel()
        lblTokenTypeTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 4
        }
        lblTokenTypeTitle.flText = "TokenType: "
        lblTokenTypeTitle.textColor = .black
        lblTokenTypeTitle.font = NSFont.systemFont(ofSize: 12)
        self.selectTokenType.bind(to: yoga, row_2) { it in
            it.width = 140
            it.height = 30
        }
        
        let lblUserIdTitle = FLLabel()
        lblUserIdTitle.bind(to: yoga, row_2) { it in
            it.marginLeft = 6
        }
        lblUserIdTitle.flText = "UserId: "
        lblUserIdTitle.textColor = .black
        lblUserIdTitle.font = NSFont.systemFont(ofSize: 12)
        self.inputUserId.bind(to: yoga, row_2) { it in
            it.width = 120
            it.height = 24
            it.marginLeft = 2
        }
        self.inputUserId.font = NSFont.systemFont(ofSize: 14)
        
        self.btnJoinChannel.bind(to: yoga, row_2) { it in
            it.width = 100
            it.height = 26
            it.position = .absolute
            it.right = 6
        }
        self.btnJoinChannel.flTitle = "Join Channel"
        self.btnJoinChannel.flTitleColor = .black
        self.btnJoinChannel.flBackgroundColor = .white
        self.btnJoinChannel.font = NSFont.boldSystemFont(ofSize: 12)
        self.btnJoinChannel.flCornerRadius = 4
        
        // line 3
        let row_3 = NSView()
        row_3.bind(to: yoga, bgView) { it in
            it.direction = .row
            it.height = 30
            it.alignItems = .center
        }
        
        self.chkLogFilter.bind(to: yoga, row_3) { it in
            it.height = 20
            it.marginLeft = 4
        }
        self.chkLogFilter.font = NSFont.systemFont(ofSize: 12)
        self.chkLogFilter.flTitle = "LogFilter"
        
        self.chkAutoSubscribeAudio.bind(to: yoga, row_3) { it in
            it.height = 20
            it.marginLeft = 4
        }
        self.chkAutoSubscribeAudio.font = NSFont.systemFont(ofSize: 12)
        self.chkAutoSubscribeAudio.flTitle = "SubscribeAudio"
        
        self.chkAutoSubscribeVudio.bind(to: yoga, row_3) { it in
            it.height = 20
            it.marginLeft = 4
        }
        self.chkAutoSubscribeVudio.font = NSFont.systemFont(ofSize: 12)
        self.chkAutoSubscribeVudio.flTitle = "SubscribeVideo"
        
        self.chkUseNewJoinChannel.bind(to: yoga, row_3) { it in
            it.height = 20
            it.marginLeft = 4
        }
        self.chkUseNewJoinChannel.font = NSFont.systemFont(ofSize: 12)
        self.chkUseNewJoinChannel.flTitle = "UseNewJoinChannel"
        
        let dividingLine = NSView()
        dividingLine.bind(to: yoga, row_3) { it in
            it.width = 0.5
            it.marginHorizontal = 20
            it.height = 16
        }
        dividingLine.flBackgroundColor = .darkGray
        
        self.btnPrivateParamsBefore.bind(to: yoga, row_3) { it in
            it.width = 90
            it.height = 26
        }
        self.btnPrivateParamsBefore.flTitle = "Params Before"
        self.btnPrivateParamsBefore.flTitleColor = .darkGray
        self.btnPrivateParamsBefore.flBackgroundColor = .white
        self.btnPrivateParamsBefore.flCornerRadius = 4
        
        self.btnPrivateParamsAfter.bind(to: yoga, row_3) { it in
            it.width = 90
            it.height = 26
            it.marginLeft = 4
        }
        self.btnPrivateParamsAfter.flTitle = "Params After"
        self.btnPrivateParamsAfter.flTitleColor = .darkGray
        self.btnPrivateParamsAfter.flBackgroundColor = .white
        self.btnPrivateParamsAfter.flCornerRadius = 4
        
        self.btnSettingsParams.bind(to: yoga, row_3) { it in
            it.width = 60
            it.height = 26
            it.marginLeft = 8
        }
        self.btnSettingsParams.flTitle = "Settings"
        self.btnSettingsParams.flTitleColor = .darkGray
        self.btnSettingsParams.flBackgroundColor = .white
        self.btnSettingsParams.flCornerRadius = 4
        
        self.btnCustomAction.bind(to: yoga, row_3) { it in
            it.width = 60
            it.height = 26
            it.marginLeft = 8
        }
        self.btnCustomAction.flTitle = "Custom"
        self.btnCustomAction.flTitleColor = .darkGray
        self.btnCustomAction.flBackgroundColor = .white
        self.btnCustomAction.flCornerRadius = 4
    }
    
    func buildStreamsGridView() {
        let bgView = NSView()
        bgView.bind(to: yoga, self.view) { it in
            it.direction = .row
            it.marginHorizontal = constHorizontalMarginDim
            it.marginTop = constVerticalMarginDim.toFLValue()
            it.flexGrow = 1
        }

        self.localStreamPanel.layoutViews(yoga: yoga, bgView)
        self.remoteUsersPanel.layoutViews(yoga: yoga, bgView)
        self.remoteStreamsPanel.layoutViews(yoga: yoga, windowSize: self.view.frame.size, bgView)
    }
    
    func buildLoggerView() {
        let bgView = NSView()
        bgView.bind(to: yoga, self.view) { it in
            it.direction = .row
            it.height = constLoggerInfoViewHeight.toFLValue()
            it.marginHorizontal = constHorizontalMarginDim
            it.marginVertical = constVerticalMarginDim
        }
        bgView.flBackgroundColor = .gray
        
        // TODO: tabs、filter、buttons height 30dp
    }
}
